import Base from "../base.js";
import SchedulesService from "../../service/SchedulesService.js"
export default class extends Base {
  constructor(props) {
    super(props);
    this.updataData=SchedulesService.getSchedulesData("_updataSchedule")
  }
  render() {
    const template = `
              <from class="layui-form" action=""  style="padding-top=100px ;">
                    <div class="layui-form-item">
                    <label class="layui-form-label">电影</label>
                    <div class="layui-input-inline">
                      <select name="movieId" lay-verify="required" lay-filter="moves">
                      </select>
                    </div>
                  </div>     
                    <div class="layui-form-item">
                    <label class="layui-form-label">影院</label>
                    <div class="layui-input-inline">
                      <select name="cinemasId" lay-verify="required"  lay-filter="cinemas">
                      </select>
                    </div>
                  </div>     
                    <div class="layui-form-item">
                    <label class="layui-form-label">放映厅</label>
                    <div class="layui-input-inline">
                      <select name="theaterId" lay-verify="required"  lay-filter="theaters">
                      <option value="${this.updataData.theaterId._id}">${this.updataData.theaterId.name}</option>
                      </select>
                    </div>
                  </div>     
                  <div class="layui-form-item">
                  <label class="layui-form-label">上映时间</label>
                  <div class="layui-input-inline">
                    <input type="text" class="layui-input" name="showTime" id="test5"  value="${this.updataData.showTime}">
                  </div>
                  </div> 
                  <div class="layui-form-item">
                  <label class="layui-form-label">价格</label>
                  <div class="layui-input-inline">
                    <input type="text" name="price"  placeholder="请输入价格"  value="${this.updataData.price}" class="layui-input">
                  </div>
                </div>
                <div class="layui-form-item">
                <div class="layui-input-block">
                  <button type="submit" class="layui-btn layui-btn-radius" lay-submit="" lay-filter="subBtn">立即更新</button>
                  <a  class="layui-btn  layui-btn-radius  layui-btn-primary" href="#/info/schedulesList">返回列表</a>
                </div>
              </div>
              </from>
        `
    this.$el.html(template);
  }
  layui() {
    this.form.render()
    this.laydate.render({
      elem: '#test5'
      , type: 'datetime'
    })
  }
  //获取电影数据
  async getMovies() {
    const data = await SchedulesService.getMovies();
    this.moviesRender(data);
  }
  //获取影院数据
  async getCinems() {
    const data = await SchedulesService.getCinems();
    this.cinemsRender(data);
  }
  //获取放映厅数据
  async getTheater(cinemasId) {
    const data = await SchedulesService.getTheaters(cinemasId);
    console.log(data);
    this.theaterRender(data);
  }

  //渲染影院

  cinemsRender(data) {
    const initOption = `<option value="${this.updataData.cinemasId._id}">${this.updataData.cinemasId.name}</option>`;
    const option = data.reduce(
      (accumulator, i) =>
        `${accumulator}<option value="${i._id}">${i.name}<option>`, initOption
    );
    $(`select[name=cinemasId]`).html(option);
    this.form.render();
  };




  //渲染电影



  moviesRender(data) {
    const initOption =  `<option value="${this.updataData.movieId._id}">${this.updataData.movieId.cname}</option>`;
    const option = data.reduce(
      (accumulator, i) =>
        `${accumulator}<option value="${i._id}">${i.cname}<option>`, initOption
    );
    $(`select[name=movieId]`).html(option);
    this.form.render();
  };



  //渲染放映厅

  theaterRender(data) {
    const initOption = `<option value="">请选择放映厅</option>`;
    const option = data.reduce(
      (accumulator, i) =>
        `${accumulator}<option value="${i._id}">${i.name}<option>`, initOption
    );
    $(`select[name=theaterId]`).html(option);
    this.form.render();
  };

//   //添加事件
 async updataSchedule(data,_id){
    const result=await SchedulesService.update(data,_id)
    if (result.nModified==1) {
        layui.layer.msg("已成功更新排片")
    }
  }

  handle() {
    let that = this
    //选择影院时的事件，发送ajax 获取该影厅能放映的放映厅     
    this.form.on('select(cinemas)', function (data) {
      that.getTheater(data.value)
    });
    //选择放映厅的事件    
    this.form.on('select(theaters)', function (data) {

    });
    //提交按钮点击后触发的事件
    this.form.on('submit(subBtn)', function (data) {
       var _id=that.updataData._id
       that.updataSchedule(data.field,_id)
      return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
    });
  }
  mounted() {
    this.getMovies()
    this.getCinems()
  }
}